import React from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
class App extends React.Component{
  //转态在哪里，操作就在哪里
  //初始化状态
  state = {todos:[
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:true},
    {id:'003',name:'打代码',done:false}
  ]}
  //addTodo用于添加一个todo 接收的参数是todo对象
  addTodo=(todoObj)=>{
    // console.log('App')
    //获取原来todos
    const {todos}=this.state
    //追加一个数组
    const NewTodos = [todoObj,...todos]
    //更新状态
    this.setState({todos:NewTodos})
  }
  //updateTodo用于更新一个todo对象
  updateTodo=(id,done)=> {
    //获取状态中的todos
    const {todos} = this.state
    const NewTodos= todos.map((todoObj)=>{
      if(todoObj.id===id)return{...todoObj,done}
      else{
        return todoObj
      }
    })
    //更改状态
    this.setState({todos:NewTodos})
  }
  //删除一个todo对象
  deleteTodo=(id)=>{
    //获取原来的todos
    const {todos} = this.state
    //删除指定的id的todo对象 
    const NewTodos= todos.filter((todoObj)=>{
      return todoObj.id !== id
    })
    //更新状态
    this.setState({todos:NewTodos})
  }
  //checkAllTodo用于全选
  checkAllTodo=(done)=>{
    //获取原来的todosconst
    const {todos} = this.state
    //加工数据
    const newTodos= todos.map((todoObj)=>{
      return {...todoObj,done}
    })
    //更新转态
    this.setState({todos:newTodos})
  }
  //clearAllDone用于清除所有已完成的
  clearAllDone=()=>{
   //获取原来的todosconst
   const {todos} = this.state
   //过滤数据
   const newTodos=todos.filter((todoObj)=>{
      return !todoObj.done
   }) 
    //更新转态
    this.setState({todos:newTodos})
  }

  render(){
    //接收
    const {todos}=this.state
    return(
      <div className="todo-container">
        <div className="todo-wrap">
          < Header addTodo={this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
        </div>
      </div>
    )
  }
}
export default App

